<template>
  <h1>Hello Vue3</h1>
  <h2>{{ numbder }}</h2>
  <button @click="btn">点击累加</button>
</template>

<script>
import { reactive, ref } from 'vue'
/* 
  目标：掌握使用ref函数定义响应式数据，一般用于简单类型数据
  
  简单类型数据：
      字符串，数字，布尔，null，undefined
  
*/
export default {
  name: 'App',
  setup() {
    console.log('setup组合API的起点')

    // 注意这里的 numbder 其实是一个响应式对象
    const numbder = ref(0)

    console.log(numbder) // RefImpl 对象（响应式对象）
    console.log(typeof numbder) // object

    const btn = () => {
      // 修改值需要通过 .value
      numbder.value++
    }

    return { numbder, btn }
  },
}
</script>

<style></style>
